<template>
	<view class="whole">
		<view class="back">
			<image class="backimg" src="../../static/icon/backimg.png" mode=""></image>
			<view class="backword">
				<view class="head">
					<image class="headimg" src="../../static/icon/lizixin.png" mode=""></image>
				</view>
				<view class="use">
					<text>李籽籽</text>
					<text>乐智出游欢迎您~</text>
				</view>
			</view>
		</view>
		<view class="All">
			<view class="club_data " style="margin: 20upx auto;height: 300upx;margin-top: 80upx;">
				<view class="club_data_l">
					<view class="club_data_l_b">
							<text class="data_text">累计收益(元)</text>
							<text class="data_num">15500</text>
					</view>
					<view @tap="money">
						<button class="button" type="default" >钱包记录</button>
					</view>
				</view>
				<view class="club_data_l">
					<view class="club_data_l_b">
							<text class="data_text">可提取额(元)</text>
							<text class="data_num">12000</text>
					</view>
					<view>
						<button class="button" type="default">立即提现</button>
					</view>
				</view>
			</view>
			<view class="cu-list menu sm-border margin-top-sm">
				<view class="cu-item arrow" @tap="contact">
					<view class="content"><text>联系客服</text></view>
					<!-- <view class="action"><text class="text-gray">133****0512</text></view> -->
				</view>
				<view class="cu-item arrow" @tap="invite">
					<view class="content"><text>邀请有礼</text></view>
				</view>
				<view class="cu-item arrow" @tap="setting">
					<view class="content"><text>个人设置</text></view>
				</view>
				<view class="cu-item arrow" @tap="opinion">
					<view class="content"><text>意见反馈</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			contact() {
				uni.navigateTo({
					
				});
			},
			invite() {
				uni.navigateTo({
					
				});
			},
			setting() {
				uni.navigateTo({
					url:"../setting/setting"
				});
			},
			opinion() {
				uni.navigateTo({
					
				});
			},
			money(){
				uni.navigateTo({
					url:"../moneyRecord/moneyRecord"
				})
			}
		}
	}
</script>

<style scoped>
	.whole{
		width: 100%;
		height: 100vh;
		background: rgba(255, 255, 255, 1);
	}
	.back {
		background: rgba(255, 255, 255, 1);
	}
	.backimg{
		width: 750rpx;
		height: 475rpx;
	}
	.headimg{
		width: 144rpx;
		height: 144rpx;
	}
	.backword{
		width:70%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		position: absolute;
		top: 120rpx;
	}
	.use{
		display: flex;
		flex-direction: column;
		font-size:36rpx;
		font-family:PingFang SC;
		font-weight:600;
		color:rgba(255,255,255,1);
		opacity:1;
	}
	.club_data {
		display: flex;
		width: 100%;
		height: 330rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 10rpx 20rpx rgba(103, 84, 152, 0.17);
		opacity: 1;
		border-radius: 24rpx;
	}
	
	.club_data_l {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding-top: 50rpx;
		padding-bottom: 30rpx;
	}
	
	.club_data_l_c {
		width: 100%;
		height: 2rpx;
		background-color: rgb(254, 153, 0);
	}
	
	.club_data_l_b {
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 25rpx;
		color: #999999;
		text-align: center;
	}
	
	.data_text {
		height:40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:40rpx;
		color:rgba(153,153,153,1);
		opacity:1;
	}
	
	.data_num {
		height:62rpx;
		font-size:44rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:62rpx;
		color:rgba(51,51,51,1);
		opacity:1;
	}
	
	.club_data_c {
		margin: 0 !important;
		width: 35%;
		height: 87%;
		top: 6.5%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		/* 		border:  rgb(254,153,0) 2rpx solid; */
		border-radius: 50%;
		position: relative;
		background-image: radial-gradient(circle,
			rgba(254, 153, 0, 0.8),
			rgb(254, 153, 0));
		z-index: 10;
	}
	
	.club_data_c text {
		color: white;
		font-size: 36upx;
		font-weight: 600;
	}
	
	.club_data_l_a {
		width: 1%;
		height: 100%;
		background-color: rgb(254, 153, 0);
		position: absolute;
		left: 100%;
		top: 0;
	}
	
		.All {
			width: 100%;
			opacity: 1;
			padding: 30px 30px 0;
			position: absolute;
			top: 200rpx;
		}
	.button{
		width:229rpx;
		height:72rpx;
		background:rgba(124,115,218,1);
		opacity:0.75;
		border-radius:44rpx;
		line-height: 72rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.cu-list + .cu-list {
		margin-top: 10px;
	}
	.cu-list.menu > .cu-item {
		min-height: 54px;
	}
</style>
